<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="4">
				<el-input placeholder="请输入用户名" size="small" v-model="listQuery.userName" clearable></el-input>
			</el-col>
			<el-col :span="4">
				<el-input placeholder="请输入账号" size="small" v-model="listQuery.account" clearable></el-input>
			</el-col>
			<el-col :span="4">
				<el-select placeholder="请选择角色" size="small" style="width: 100%" v-model="listQuery.roleIds" clearable>
					<el-option v-for="v in roleData" :key="v.id" :label="v.name" :value="v.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="4">
				<el-select placeholder="请选择账号状态" size="small" style="width: 100%" v-model="listQuery.del" clearable>
					<el-option label="激活" value="1"></el-option>
					<el-option label="封禁" value="2"></el-option>
				</el-select>
			</el-col>
			<el-col :span="4">
				<el-button size="small" type="primary" icon="el-icon-search" plain @click="handleSearch">搜索</el-button>
			</el-col>
		</el-row>
		<div class="bottom-btns">
			<el-button type="primary" size="small" icon="el-icon-plus" v-if="$button('738')" @click="handleAdd">新增用户</el-button>
			<el-button type="primary" size="small" plain v-if="$button('739')" @click="handleSetRole()">批量配置角色</el-button>
			<el-button type="primary" size="small" plain v-if="$button('740')" @click="handleSetDept()">批量配置部门</el-button>
			<el-button type="primary" size="small" plain @click="handleActive()">批量激活</el-button>
			<el-button type="primary" size="small" plain @click="handleBanned()">批量封禁</el-button>
			<!-- <ImportButtons type="user" /> -->
		</div>
	</div>
</template>
<script>
//封禁|激活方法
import banned from '../mixin/banned';
export default {
	mixins: [banned],
	components: {
		// ImportButtons: () => import('@/components/importButtons'),
	},
	data() {
		return {
			listQuery: {
				userName: '',
				account: '',
				del: '',
				type: '',
				roleIds: []
			},
			typeData: [],
			checkedUser: []
		};
	},
	props: ['roleData'],
	mounted() {
		this.getUserType();
	},
	methods: {
		handleSearch() {
			this.$bus.$emit('refreshUserList', this.listQuery);
		},
		async getUserType() {
			this.typeData = await this.$store.dispatch('getDictionaryEnumListVal', 'TB_SYS_USER_TYPE');
		},
		//新增用户
		handleAdd() {
			this.$bus.$emit('changeUserTemplate', 'Add');
		},
		//批量配置角色
		handleSetRole() {
			this.checkedUser = this.$store.state.tbSysUser.checkedUser;
			if (this.checkedUser.length == 0) {
				this.warnMsg('请选择用户');
				return;
			}
			this.$bus.$emit('showDialogSetRole', this.checkedUser);
		},
		//批量设置部门
		handleSetDept() {
			this.checkedUser = this.$store.state.tbSysUser.checkedUser;
			if (this.checkedUser.length == 0) {
				this.warnMsg('请选择用户');
				return;
			}
			this.$bus.$emit('showDialogSetDepartment', this.checkedUser);
		},
		handleActive() {
			this.checkedUser = this.$store.state.tbSysUser.checkedUser;
			if (this.checkedUser.length == 0) {
				this.warnMsg('请选择用户');
				return;
			}
			this.handleBanOrRecover(this.checkedUser, 'recover', 'search');
		},
		handleBanned() {
			this.checkedUser = this.$store.state.tbSysUser.checkedUser;
			if (this.checkedUser.length == 0) {
				this.warnMsg('请选择用户');
				return;
			}
			this.handleBanOrRecover(this.checkedUser, 'ban', 'search');
		}
	}
};
</script>
<style scoped lang="scss">
.bottom-btns {
	margin-top: 10px;
	height: 40px;
	button {
		float: left;
	}
}
</style>
